<template>
  <div class="flex_">
    <div>
      <div class="header_text">
        <div>审批规则</div>
        <div class="flex_">
          <i
            class="el-icon-edit-outline"
            style="padding:0px 5px;"
            @click="update_fn_rule"
          ></i>
          <i
            class="el-icon-delete-solid"
            style="padding:0px 5px;"
            @click="delete_fn_rule"
          ></i>
          <i
            class="el-icon-plus"
            style="padding:0px 5px;"
            @click="add_dialogVisible_rule = true"
          ></i>
        </div>
      </div>
      <el-card style="margin-bottom: 20px;min-height:500px" shadow="never">
        <el-table
          border
          ref="singleTable"
          :data="ruleData"
          :show-header="false"
          highlight-current-row
          @current-change="handleCurrentChange"
        >
          <el-table-column property="name"> </el-table-column>
        </el-table>
      </el-card>
    </div>
    <div>
      <div class="header_text">
        <div>审批规则明细</div>
        <div>
          <el-button type="primary" size="small" @click="end_fn">
            保存
          </el-button>
        </div>
      </div>
      <el-card>
        <el-card shadow="never" class="d2-mb titleline">
          <template slot="header" style="height:66px;">
            <span class="title_x el-button--primary fl"></span>
            <p class="title_l fl">审批任务</p>
          </template>
          <div class="flex_">
            <el-card style="flex:1" v-if="currentRow == ''" shadow="never">
              <el-tag v-for="tag in currentRowlry" :key="tag">
                {{ tag }}
              </el-tag>
            </el-card>
            <el-card style="flex:1" v-if="currentRow != ''" shadow="never">
              <el-tag
                v-for="tag in currentRow.tasks"
                :key="tag.code"
                closable
                @close="handleClose_tag(tag.code)"
              >
                {{ tag.name }}
              </el-tag>
            </el-card>
            <i
              class="el-icon-plus icons icons_color"
              @click="add_task_dialogVisible_fn()"
            ></i>
          </div>
        </el-card>
        <!-- <div class="titles">审批任务</div> -->

        <div>
          <el-card shadow="never" class="d2-mb titleline">
            <template slot="header" style="height:66px;">
              <span class="title_x el-button--primary fl"></span>
              <p class="title_l fl">{{ faqi_data.name }}</p>
              <div style="float: right;line-height:56px">
                <i
                  class="el-icon-plus iconsss"
                  style="padding: 0px 5px;"
                  aria-hidden="true"
                  @click="add_first_fn"
                ></i>
                <i
                  class="el-icon-edit-outline icons_color iconsss_ty"
                  aria-hidden="true"
                  @click="update_dialogVisible_right_fnn_two()"
                ></i>
              </div>
            </template>
            <!-- <div class="titles flex_just">
            <div>{{ faqi_data.name }}</div>
            <div>
              <i
                class="el-icon-edit-outline"
                aria-hidden="true"
                @click="update_dialogVisible_right = true"
              ></i>
            </div>
          </div> -->
            <div class="flex_just" style="margin-top:10px">
              <div style="line-height:74px;padding:0px 15px">抄送人 :</div>
              <el-card style="flex:1" shadow="never">
                <el-tag
                  v-for="tag in faqi_data.send_user"
                  :key="tag.name"
                  closable
                  @close="handleClose_tag_two(tag)"
                >
                  {{ tag.name }}
                </el-tag>
              </el-card>
              <i
                class="el-icon-plus icons icons_color"
                @click="users_data_add_dialogVisible_fn()"
              ></i>
            </div>
          </el-card>
        </div>
        <!-- <div> -->
        <el-card
          shadow="never"
          class="d2-mb titleline"
          v-for="item in right_data"
          :key="item.id"
        >
          <template slot="header" style="height:66px;">
            <span class="title_x el-button--primary fl"></span>
            <p class="title_l fl">{{ item.name }}</p>
            <div style="float: right;line-height:56px">
              <i
                class="el-icon-edit-outline iconsss_ty icons_color"
                style="padding:0px 5px;"
                @click="update_fn(item.id, item.name)"
                aria-hidden="true"
              ></i>
              <i
                class="el-icon-delete-solid iconsss_ty"
                style="padding:0px 5px;"
                @click="del_fn(item.id, item.name)"
              ></i>
              <i
                class="el-icon-plus iconsss"
                style="padding:0px 5px;"
                aria-hidden="true"
                @click="insertion_fn(item.id)"
              ></i>
            </div>
          </template>
          <!-- <div v-for="item in right_data" :key="item.id"> -->
          <!-- <div class="titles flex_just">
              <div>{{ item.name }}</div>
              <div>
                <i
                  class="el-icon-edit-outline"
                  style="padding:0px 5px;"
                  @click="update_fn(item.id, item.name)"
                  aria-hidden="true"
                ></i>
                <i
                  class="el-icon-delete-solid"
                  style="padding:0px 5px;"
                  @click="del_fn(item.id)"
                ></i>
                <i
                  class="el-icon-plus"
                  style="padding:0px 5px;"
                  aria-hidden="true"
                  @click="insertion_fn(item.id)"
                ></i>
              </div>
            </div> -->
          <div class="flex_just">
            <div style="line-height:74px;padding:0px 15px">审批人 :</div>
            <el-card style="flex:1" shadow="never">
              <el-tag
                v-for="tag in item.process_user"
                :key="tag.name"
                closable
                :type="tag.type"
                @close="handleClose_tag_three(item, tag)"
              >
                {{ tag.name }}
              </el-tag>
            </el-card>
            <i
              class="el-icon-plus icons icons_color"
              @click="for_add_fn(item, 1)"
            ></i>
          </div>
          <div class="flex_just" style="margin-top:10px">
            <div style="line-height:74px;padding:0px 15px">抄送人 :</div>
            <el-card style="flex:1" shadow="never">
              <el-tag
                v-for="tag in item.send_user"
                :key="tag.name"
                closable
                :type="tag.type"
                @close="handleClose_tag_four(item, tag)"
              >
                {{ tag.name }}
              </el-tag>
            </el-card>
            <i
              class="el-icon-plus icons icons_color"
              @click="for_add_fn(item, 2)"
            ></i>
          </div>
        </el-card>
        <!-- </div> -->
        <!-- </div> -->
        <!-- <div class="titles flex_just">
          <div>第2级审批</div>
          <div>
            <i class="fa fa-hdd-o" aria-hidden="true"></i>
            <i class="fa fa-hdd-o" aria-hidden="true"></i>
          </div>
        </div>
        <div class="flex_just">
          <div style="line-height:74px;padding:0px 15px">发起人 :</div>
          <el-card style="flex:1">
            <el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
              {{tag.name}}
            </el-tag>
          </el-card>
          <i class="el-icon-plus icons"></i>
        </div>
        <div class="flex_just" style="margin-top:10px">
          <div style="line-height:74px;padding:0px 15px">抄送人 :</div>
          <el-card style="flex:1">
            <el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
              {{tag.name}}
            </el-tag>
          </el-card>
          <i class="el-icon-plus icons"></i>
        </div> -->
      </el-card>
    </div>
    <el-dialog
      title="增加审批规则"
      :visible.sync="add_dialogVisible_rule"
      width="400px"
      :before-close="handleClose"
    >
      <el-form :model="add_rule_list" label-width="100px">
        <el-form-item label="审批规则名称" prop="name">
          <el-input v-model="add_rule_list.name"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog_button">
        <el-button size="small" @click="add_dialogVisible_rule = false"
          >取消</el-button
        >
        <el-button type="primary" size="small" @click="add_ruleLists"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="审批规则改名"
      :visible.sync="update_dialogVisible_rule"
      width="400px"
      :before-close="handleClose"
    >
      <el-form :model="update_rule_list" label-width="100px">
        <el-form-item label="审批规则名称" prop="name">
          <el-input v-model="update_rule_list.name"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog_button">
        <el-button size="small" @click="update_dialogVisible_rule = false"
          >取消</el-button
        >
        <el-button type="primary" size="small" @click="update_ruleLists"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="审批任务"
      :visible.sync="add_task_dialogVisible"
      width="400px"
      :before-close="handleClose"
    >
      <el-table
        ref="multipleTable"
        :data="tags_task_list"
        :show-header="false"
        @selection-change="handleSelectionChange_add"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column property="name"></el-table-column>
      </el-table>
      <div align="right" style="margin-top:15px">
        <el-button
          type="primary"
          size="small"
          @click="add_dialogVisible_rule_select_fn"
          >确定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="审批流程名称修改"
      :visible.sync="update_dialogVisible_right"
      width="400px"
      :before-close="handleClose"
    >
      <el-form label-width="100px">
        <el-form-item label="审批规则名称" prop="name">
          <el-input v-model="zhongjian_one"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog_button">
        <el-button size="small" @click="update_dialogVisible_right = false"
          >取消</el-button
        >
        <el-button
          type="primary"
          size="small"
          @click="update_dialogVisible_right_fnn"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="添加用户"
      :visible.sync="users_data_add_dialogVisible"
      width="400px"
      :before-close="handleClose"
    >
      <el-table
        ref="userdataone"
        :data="users_data"
        :show-header="false"
        @selection-change="handleSelectionChange_add_users"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column property="name"> </el-table-column>
      </el-table>
      <div class="dialog_button">
        <el-button size="small" @click="users_data_add_dialogVisible = false"
          >取消</el-button
        >
        <el-button
          type="primary"
          size="small"
          @click="users_data_add_dialogVisible_end()"
          >保存</el-button
        >
      </div>
    </el-dialog>

    <!-- 循环添加用户 -->
    <el-dialog
      title="添加用户"
      :visible.sync="for_data_add_dialogVisible"
      width="400px"
      :before-close="handleClose"
    >
      <el-table
        ref="users_data_xh"
        :data="users_data"
        :show-header="false"
        @selection-change="handleSelectionChange_add_users_for"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column property="name"></el-table-column>
      </el-table>
      <div class="dialog_button">
        <el-button size="small" @click="for_data_add_dialogVisible = false"
          >取消</el-button
        >
        <el-button
          type="primary"
          size="small"
          @click="for_data_add_dialogVisible_fn()"
          >保存</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      title="审批流程名称修改"
      :visible.sync="update_name_dialogVisible"
      width="400px"
      :before-close="handleClose"
    >
      <el-form label-width="100px">
        <el-form-item label="审批规则名称">
          <el-input v-model="zhongjian_name"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog_button">
        <el-button size="small" @click="update_name_dialogVisible = false"
          >取消</el-button
        >
        <el-button
          type="primary"
          size="small"
          @click="update_name_dialogVisible_fn()"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="增加审批主体"
      :visible.sync="add_min_dialogVisible"
      width="500px"
      :before-close="handleClose"
    >
      <el-form label-width="100px" :model="min_data">
        <el-form-item label="审批规则名称" prop="name">
          <el-input v-model="min_data.name"></el-input>
        </el-form-item>
        <el-form-item label="添加审批人">
          <el-table
            ref="users_data"
            :data="users_data"
            :show-header="false"
            @selection-change="handleSelectionChange_add_users_one"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column property="name"> </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="添加抄送人">
          <el-table
            ref="users_data"
            :data="users_data"
            :show-header="false"
            @selection-change="handleSelectionChange_add_users_two"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column property="name"> </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div class="dialog_button">
        <el-button size="small" @click="add_min_dialogVisible = false"
          >取消</el-button
        >
        <el-button
          type="primary"
          size="small"
          @click="add_min_dialogVisible_fn()"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getWorkflow,
  workflow,
  getBusiness_task,
  getWorkflow_step,
  workflow_step,
  getWork_order,
  work_flow_rule,
  getUsers
} from "@/api/url";
export default {
  data() {
    return {
      ruleData: ["无"],
      add_task_dialogVisible: false,
      add_dialogVisible_rule: false,
      update_dialogVisible_rule: false,
      update_dialogVisible_right: false,
      users_data_add_dialogVisible: false,
      update_name_dialogVisible: false,
      add_min_dialogVisible: false,
      for_data_add_dialogVisible: false,
      currentRow: "",
      currentRowlry: [],
      add_rule_list: {
        name: "",
        operation: "ADD"
      },
      update_rule_list: {
        name: "",
        id: "",
        operation: "MOD"
      },
      faqi_data: "",
      tags_task_list: [],
      tags: [
        { name: "标签一", type: "" },
        { name: "标签二", type: "success" },
        { name: "标签三", type: "info" },
        { name: "标签四", type: "warning" },
        { name: "标签五", type: "danger" }
      ],
      zhongjian: [],
      zhongjian_one: "",
      zhongjian_two: "",
      zhongjian_for: "",
      right_data: [],
      users_data: "",
      zhongjian_name: "",
      zhongjian_id: "",
      min_data: {
        name: ""
      },
      shengpr: "",
      chaosr: "",
      indexs: "",
      indexID: "",
      indexType: ""
    };
  },
  created() {
    this.getWorkflowList();
    this.task_list();
    getUsers().then(res => {
      this.users_data = res.result;
    });
  },
  methods: {
    // 添加审批任务
    add_task_dialogVisible_fn() {
      if (this.currentRow != "") {
        this.add_task_dialogVisible = true;
        var arr = [...this.tags_task_list].filter(x => {
          return [...this.currentRow.tasks].some(y => y.code === x.code);
        });
        this.$nextTick(() => {
          this.$refs["multipleTable"].clearSelection();
          arr.forEach(row => {
            this.$refs["multipleTable"].toggleRowSelection(row);
          });
        });
      } else {
        this.$message({
          message: "请先选择审批规则",
          type: "warning"
        });
      }
    },
    add_first_fn() {
      if (this.currentRow === "") {
        this.$message({
          message: "请先选择审批规则",
          type: "warning"
        });
        return;
      }
      if (this.right_data.length == 0) {
        var das = {
          id: "",
          created_time: "",
          modified_time: "",
          name: "第一审批阶段",
          process_depart: [],
          process_user: [],
          send_depart: [],
          send_user: []
        };
        this.right_data.push(das);
      } else {
        this.$message({
          message: "只能添加一次",
          type: "warning"
        });
      }
    },
    update_dialogVisible_right_fnn_two() {
      if (this.currentRow === "") {
        this.$message({
          message: "请先选择审批规则",
          type: "warning"
        });
        return;
      }
      this.update_dialogVisible_right = true;
    },
    handleCurrentChange(val) {
      this.currentRow = val;
      if (this.currentRow == null || this.currentRow == "") {
        this.currentRow = "";
      } else {
        var data = {
          flow_id: this.currentRow.id
        };
        getWorkflow_step(data)
          .then(res => {
            this.right_data = res.result;
            if (this.right_data.length == 0) {
              this.faqi_data = {
                id: "",
                created_time: "",
                modified_time: "",
                name: "发起阶段",
                flow: this.currentRow.id,
                pid: null,
                process_depart: [],
                process_user: [],
                send_depart: [],
                send_user: []
              };
            } else {
              this.faqi_data = res.result[0];
            }
            this.zhongjian_one = this.faqi_data.name;
            //因为发起样式不一样 所以要把第一个截取下来
            this.right_data.shift();
          })
          .catch(err => {
            this.$message.error(err.msg);
          });
      }
    },
    // 审批任务查询
    task_list() {
      getBusiness_task().then(res => {
        this.tags_task_list = res.result;
      });
    },
    //审批规则查询
    getWorkflowList() {
      getWorkflow().then(res => {
        if (res.result.length == 0) {
          this.ruleData = res.result;
          this.currentRow = "";
          this.right_data = [];
          this.faqi_data = {
            id: "",
            created_time: "",
            modified_time: "",
            name: "发起阶段",
            flow: this.currentRow.id,
            pid: null,
            process_depart: [],
            process_user: [],
            send_depart: [],
            send_user: []
          };
        } else {
          this.ruleData = res.result;
          this.$refs.singleTable.setCurrentRow(this.ruleData[0]);
        }
      });
    },
    //步骤查询
    // task_steps() {
    //   var datas = {
    //     flow_id: this.currentRow.id,
    //   }
    //   getWorkflow_step(datas).then((res) => {
    //     console.log(res)
    //   })
    // },
    //添加审批规则
    add_ruleLists() {
      workflow(this.add_rule_list).then(res => {
        this.getWorkflowList();
        this.add_dialogVisible_rule = false;
        this.$message({
          type: "success",
          message: res.msg
        });
      });
    },
    // 跳出修改弹窗
    update_fn_rule() {
      if (this.currentRow === "") {
        this.$message({
          message: "请先选择审批规则",
          type: "warning"
        });
      } else {
        this.update_dialogVisible_rule = true;
        this.update_rule_list.name = this.currentRow.name;
        this.update_rule_list.id = this.currentRow.id;
      }
    },
    //修改审批规则名称
    update_ruleLists() {
      workflow(this.update_rule_list).then(res => {
        this.getWorkflowList();
        this.update_dialogVisible_rule = false;
        this.$message({
          type: "success",
          message: res.msg
        });
      });
    },
    //删除修改规则
    delete_fn_rule() {
      if (this.currentRow === "") {
        this.$message({
          message: "请先选择审批规则",
          type: "warning"
        });
      } else {
        this.$confirm("是否删除审批规则?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            var datass = {
              operation: "DEL",
              id: this.currentRow.id
            };
            workflow(datass).then(res => {
              this.getWorkflowList();
              this.$message({
                type: "success",
                message: "删除成功"
              });
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    handleClose_tag(tag) {
      // console.log(1)
      this.currentRow.tasks.splice(this.currentRow.tasks.indexOf(tag), 1);
    },
    handleClose_tag_two(tag) {
      this.faqi_data.send_user.splice(this.faqi_data.send_user.indexOf(tag), 1);
    },
    handleClose_tag_three(tag, tagitem) {
      this.right_data.forEach(item => {
        if (item.id === tag.id) {
          item.process_user.splice(item.process_user.indexOf(tagitem), 1);
        }
      });
    },
    handleClose_tag_four(tag, tagitem) {
      this.right_data.forEach(item => {
        if (item.id === tag.id) {
          item.send_user.splice(item.send_user.indexOf(tagitem), 1);
        }
      });
    },
    add_dialogVisible_rule_select_fn() {
      this.currentRow.tasks = this.zhongjian;
      this.add_task_dialogVisible = false;
    },
    update_dialogVisible_right_fnn() {
      this.update_dialogVisible_right = false;
      this.faqi_data.name = this.zhongjian_one;
    },
    handleSelectionChange_add(val) {
      this.zhongjian = val;
    },
    end_fn() {
      if (this.currentRow === "") {
        this.$message({
          message: "请先选择审批规则",
          type: "warning"
        });
      } else {
        // this.right_data.unshift(this.faqi_data);
        for (let inds = 0; inds < this.right_data.length; inds++) {
          if (this.right_data[inds].process_user.length < 1) {
            this.$message({
              message: "审批人不能为空",
              type: "warning"
            });
            return;
          }
        }
        //审批人查重
        let quchong = [];
        this.right_data.forEach(iiits => {
          iiits.process_user.forEach(item => {
            quchong.push(item.name);
          });
        });
        let cf =this.duplicates(quchong)
        if(cf.length>0){
          this.$message({
              message: "审批人不能重复",
              type: "warning"
            });
            return
        }
        
        let shuju = JSON.parse(JSON.stringify(this.right_data));
        shuju.unshift(this.faqi_data);
        //审批任务
        let tasks = [];
        this.currentRow.tasks.forEach(item => {
          tasks.push(item.code);
        });
        var data = {
          operation: "ADD",
          id: this.currentRow.id,
          tasks: tasks,
          steps: shuju
        };
        work_flow_rule(data)
          .then(res => {
            var datalry = {
              flow_id: this.currentRow.id
            };
            getWorkflow_step(datalry)
              .then(res => {
                this.right_data = res.result;
                if (this.right_data.length == 0) {
                  this.faqi_data = {
                    id: "",
                    created_time: "",
                    modified_time: "",
                    name: "发起阶段",
                    flow: this.currentRow.id,
                    pid: null,
                    process_depart: [],
                    process_user: [],
                    send_depart: [],
                    send_user: []
                  };
                } else {
                  this.faqi_data = res.result[0];
                  //因为发起样式不一样 所以要把第一个截取下来
                  this.right_data.shift();
                }
                this.zhongjian_one = this.faqi_data.name;
              })
              .catch(err => {
                this.$message.error(err.msg);
              });
            this.$message({
              message: res.result,
              type: "success"
            });
          })
          .catch(err => {
            this.$message.error(err.msg);
          });
      }
    },
    //查重方法
    duplicates(arr) {
			    var newarr = [];
			    for(var j = 0;j < arr.length;j++){
			        for(var i = j+1;i < arr.length;i++){
			            if(arr[j] == arr[i]){
			                newarr.push(arr[i]);
			                
			            }
			        }
			    } 
			    //return [...new Set(newarr)];
			    return Array.from(new Set(newarr));
			},
    users_data_add_dialogVisible_fn() {
      if (this.currentRow === "") {
        this.$message({
          message: "请先选择审批规则",
          type: "warning"
        });
        return;
      }
      this.users_data_add_dialogVisible = true;
      var arr = [...this.users_data].filter(x => {
        return [...this.faqi_data.send_user].some(y => y.id === x.id);
      });
      this.$nextTick(() => {
        this.$refs["userdataone"].clearSelection();
        arr.forEach(row => {
          this.$refs["userdataone"].toggleRowSelection(row);
        });
      });
    },
    handleSelectionChange_add_users(val) {
      this.zhongjian_two = val;
    },
    handleSelectionChange_add_users_for(val) {
      this.zhongjian_for = val;
    },
    handleSelectionChange_add_users_one(val) {
      this.shengpr = val;
    },
    handleSelectionChange_add_users_two(val) {
      this.chaosr = val;
    },
    users_data_add_dialogVisible_end() {
      this.users_data_add_dialogVisible = false;
      this.faqi_data.send_user = this.zhongjian_two;
    },
    update_fn(id, name) {
      this.update_name_dialogVisible = true;
      this.zhongjian_name = name;
      this.zhongjian_id = id;
    },
    update_name_dialogVisible_fn() {
      // this.right_data.forEach(item => {
      //   if (item.id == this.zhongjian_id) {
      //     item.name = this.zhongjian_name;
      //   }
      // });
      for (var i = 0; i < this.right_data.length; i++) {
        if (this.right_data[i].name == this.zhongjian_one) {
          this.$message({
            message: "步骤名不能相同",
            type: "warning"
          });
          return;
        } else {
          this.right_data.forEach(item => {
            if (item.id == this.zhongjian_id) {
              item.name = this.zhongjian_name;
            }
          });
        }
      }
      this.update_name_dialogVisible = false;
    },
    del_fn(id, name) {
      for (var i = 0; i < this.right_data.length; i++) {
        if (this.right_data[i].name == name) {
          this.right_data.splice(i, 1);
        }
      }
      // var arrys = [];
      // arrys.push(id);
      // var data = {
      //   operation: "DEL",
      //   id: arrys
      // };
      // workflow_step(data).then(res => {
      //   getWorkflow_step().then(res => {
      //     this.right_data = res.result;
      //   });
      //   this.$message({
      //     message: res.msg,
      //     type: "success"
      //   });
      // });
    },
    //插入一条步骤
    insertion_fn(id) {
      var index = this.right_data.findIndex(item => item.id === id);
      this.indexs = index;
      this.add_min_dialogVisible = true;
    },
    for_add_fn(its, type) {
      this.indexID = its.id; //先确定是数组里的哪一个
      this.indexType = type; //在确定是点击的是抄送人还是审批人
      this.for_data_add_dialogVisible = true;
      // this.users_data.forEach(item => {
      // console.log(its);
      if (type == 1) {
        let arr = [...this.users_data].filter(x => {
          return [...its.process_user].some(y => y.id === x.id);
        });
        this.$nextTick(() => {
          this.$refs["users_data_xh"].clearSelection();
          arr.forEach(row => {
            this.$refs["users_data_xh"].toggleRowSelection(row);
          });
        });
      } else {
        let arr = [...this.users_data].filter(x => {
          return [...its.send_user].some(y => y.id === x.id);
        });
        this.$nextTick(() => {
          this.$refs["users_data_xh"].clearSelection();
          arr.forEach(row => {
            this.$refs["users_data_xh"].toggleRowSelection(row);
          });
        });
      }

      // }
      // });
      //  var arr = [...this.users_data].filter(x => {
      //   return [...this.currentRow.tasks].some(y => y.code === x.code);
      // });
      // this.$nextTick(() => {
      //   this.$refs["users_data_xh"].clearSelection();
      //   arr.forEach(row => {
      //     this.$refs["users_data_xh"].toggleRowSelection(row);
      //   });
      // });
    },
    for_data_add_dialogVisible_fn() {
      if (this.indexType == 1) {
        this.right_data.forEach(ites => {
          if (ites.id === this.indexID) {
            ites.process_user = this.zhongjian_for;
          }
        });
      } else {
        this.right_data.forEach(ites => {
          if (ites.id === this.indexID) {
            ites.send_user = this.zhongjian_for;
          }
        });
      }
      this.for_data_add_dialogVisible = false;
    },
    add_min_dialogVisible_fn() {
      // this.right_data.push({
      //   id: null,
      //   name: this.min_data.name,
      //   send_user: this.chaosr,
      //   send_depart: [],
      //   process_user: this.shengpr,
      //   process_depart: []
      // })
      if (this.min_data.name == "") {
        this.$message({
          message: "步骤名不能为空",
          type: "warning"
        });
        return;
      }
      this.right_data.splice(this.indexs + 1, 0, {
        id: null,
        name: this.min_data.name,
        send_user: this.chaosr,
        send_depart: [],
        process_user: this.shengpr,
        process_depart: []
      });
      // this.right_data.push(this.faqi_data);
      // var shuju = this.right_data
      // shuju.unshift(this.faqi_data)
      // var data = {
      //   operation: "ADD",
      //   id: this.currentRow.id,
      //   tasks: this.currentRow.tasks,
      //   steps: this.right_data
      // };
      this.add_min_dialogVisible = false;
      //  console.log(data)
      // work_flow_rule(data).then(res => {
      //   this.add_min_dialogVisible = false;
      //   this.getWorkflowList();
      //   this.$message({
      //     message: res.msg,
      //     type: "success"
      //   });
      // });
    }
  }
};
</script>
<style scoped>
.flex_,
.flex_just {
  display: flex;
  justify-content: space-between;
}
.flex_ > div:nth-child(1) {
  width: 400px;
}
.flex_ > div:nth-child(2) {
  flex: 1;
  padding-left: 20px;
}
.header_text {
  display: flex;
  justify-content: space-between;
  font-size: 17px;
  font-weight: 700;
  line-height: 17px;
  padding: 15px 0px;
}
.el-tag {
  margin-left: 10px;
  margin-right: 10px;
}
.titles {
  font-weight: 600;
  padding: 5px;
  background-color: rgb(183, 222, 232);
  margin: 10px 0px;
}
.icons {
  font-size: 25px;
  line-height: 72px;
  padding: 0px 10px;
  font-weight: 600;
}
.dialog_button {
  display: flex;
  justify-content: space-around;
}
.icons_color {
  color: rgb(0, 131, 130);
}
.iconsss {
  font-size: 17px;
  font-weight: 600;
}
.iconsss_ty {
  font-size: 17px;
}
</style>
